<template>
	<div class="lietou-detail content">
		<div class="detail-bg"></div>
		<div class="lietou-right">
			<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
			
			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">绑定银行卡</h2>
				<el-form ref="form" :model="bankCard" label-width="100px"  class="form-data" :rules="bankCardRules" autocomplete="on">
				  <el-form-item label="持 卡 人:" prop="cardName">
				    <el-input v-model="bankCard.cardName" placeholder="请输入账户名称"  ref="cardName" tabindex="1" autocomplete="on"></el-input>
				  </el-form-item>
				  <el-form-item label="银行卡号:" prop="cardNumber">
				    <el-input v-model="bankCard.cardNumber" placeholder="请输入银行卡号" ref="cardNumber" tabindex="1" autocomplete="on"></el-input>
				  </el-form-item>
				  <el-form-item label="开 户 行:" prop="cardFrom">
				    <el-input v-model="bankCard.cardFrom" placeholder="请输入开户行名称" ref="cardFrom" tabindex="1" autocomplete="on"></el-input>
				  </el-form-item>
				  <el-form-item label="支行名称:" prop="zhihangName">
				    <el-input v-model="bankCard.zhihangName" placeholder="请输入支行名称" ref="zhihangName" tabindex="1" autocomplete="on"></el-input>
				  </el-form-item>
				  
				  <el-form-item>
						<el-button type="info" plain @click="onCancelHandle" style="margin-right:30px;">取消</el-button>
						<el-button type="primary" @click="onSubmit">{{isEdit?'确认修改':'确认绑定'}}</el-button>
				  </el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Breadcrumb from '@/components/Breadcrumb'
	export default {
		name: 'FinaceDetail',
		components:{
			Breadcrumb
		},
		computed: {
			...mapGetters([
				'token',
				'userinfo'
			])
		},
		data() {
			const validateCardName = (rule, value, callback) => {
				if (value.length < 1) {
					callback(new Error('持卡人不能为空'))
				} else {
					callback()
				}
			}
			const validateCardNumber = (rule, value, callback) => {
				if (value.length < 1) {
					callback(new Error('银行卡号不能为空'))
				} else {
					callback()
				}
			}
			const validateCardFrom =	(rule, value, callback) => {
				if (value.length < 1) {
					callback(new Error('开户行不能为空！'))
				} else {
					callback()
				}
			}	
			const validateZhihangName =	(rule, value, callback) => {
				if (value.length < 1) {
					callback(new Error('支行名称不能为空！'))
				} else {
					callback()
				}
			}		
			return {
				isEdit: false, //是否是编辑
				bankCard:{
					cardName:'',
					cardNumber:'',
					cardFrom:'',
					zhihangName:'',
					cardid:''
				},
				bankCardRules: {
					cardName: [{ required: true, trigger: 'blur', validator: validateCardName }],
					cardNumber: [{ required: true, trigger: 'blur', validator: validateCardNumber }],
					cardFrom: [{ required: true, trigger: 'blur', validator: validateCardFrom }],
					zhihangName: [{ required: true, trigger: 'blur', validator: validateZhihangName }]
				},
			}
		},
		async created() {
			let params = this.$route.query;
			this.bankCard = {
					cardName: params.username==undefined?'':params.username,
					cardNumber: params.bankcardno==undefined?'':params.bankcardno,
					cardFrom: params.bank==undefined?'':params.bank,
					zhihangName: params.branch==undefined?'':params.branch,
					cardid: params.cardid==undefined?'':params.cardid
				};
		},
		mounted() {
			// 绑定监听事件
			window.addEventListener('keydown', this.keyDown);
		},
		destroyed() {
			// 销毁事件
		   window.removeEventListener('keydown', this.keyDown, false);
		},
		methods: {
			keyDown(e) {
				// 回车则执行登录方法 enter键的ASCII是13
				if (e.keyCode === 13) {
					this.onSubmit(); // 提交
				}
			},
			//提交
			onSubmit(){
				this.$refs.form.validate(valid => {
					if (valid) {
						this.submitHandle()
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},
			async submitHandle() {
				let that = this;
				const loading = that.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.5)'
			   });
				try {
					let data = {
						"token": that.token,
						"humanname":that.bankCard.cardName,
						"cardid": that.bankCard.cardid,
						"bankcardno": that.bankCard.cardNumber,
						"bank": that.bankCard.cardFrom,
						"branch": that.bankCard.zhihangName,	
					}
					let res = await that.$http({
						url: '/man/pay/bindCard',
						method: 'post',
						params: data
					});
					that.$message({
						type: 'success',
						message: '绑定成功!'
					});
					that.$store.dispatch('user/getInfo');
					setTimeout(function(){
						that.$store.dispatch('tagsView/delView', that.$route)// 调用全局挂载的方法
						that.$router.go(-1);
					},600)
					loading.close();
			   } catch (e) {
					console.log(e)
					loading.close();
				}
			},
			//取消
			onCancelHandle(){
				this.$store.dispatch('tagsView/delView', this.$route)// 调用全局挂载的方法
				this.$router.go(-1);
			}
			
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lietou-detail{
		// background-color: #f4f4f4;
		background-color: rgb(240, 242, 245);
		position: relative;
		
		.detail-bg {
		  position: fixed;
		  top: 0px;
		  left: 0;
		  bottom:0;
		  right: 0;
		  background: #f4f4f4;
		}
		
	}
	.lietou-detail-head{
		background-color: #fff;
		margin:0 0 20px 0px;
		padding-bottom:25px;
		position: relative;
		min-width:800px;
		
		.lietou-detail-h1{
			font-size:18px;
			font-weight: bold;
			padding:20px 16px 8px;
		}
		.acount{
			margin:0 34px 12px;
			line-height: 26px;
			.tag-name{
				margin-right:20px;
			}
			
		}
	}
	.form-data{
		width:500px;
		margin:16px 0 0 30px;
	}
</style>
